<!-- 预约弹框选择组件 -->
<template>
  <view class="popup-page">
    <view class="popup-bg"></view>
    <view class="popup-body">
      <image
        class="close-icon"
        @click="$emit('close')"
        :src="asyncImgs.alipay.close_grey_icon"
        mode=""
      />
      <view class="pepole-titile">您好，什么时候，几位</view>
      <!-- 订餐人数 -->
      <scroll-view scroll-x="true">
		  <view class="people-num">
			<view
			  v-for="(item, index) in configData.peopleConfig"
			  class="people-num-item"
			  :class="{ 'active-peoppe': activePeople == index }"
			  :key="index"
			  @click="activePeople = index"
			>
			  <text>{{ item }}人</text>
			</view>
		  </view>
      </scroll-view>
      <!-- 订餐日期 -->
      <scroll-view style="margin-top: 8vw;" scroll-x="true">
		  <view class="order-day">
			  <view
			    v-for="(item, index) in configData.orderDay"
			    class="order-day-item"
			    :class="{ 'active-day': activeDay == index }"
			    :key="index"
			    @click="activeDay = index"
			  >
			    <view class="day-text">
			      <view>{{ item.day }}</view>
			      <view v-if="index > 1">{{ item.week }}</view>
			    </view>
			  </view>
		  </view>
        
      </scroll-view>
      <!-- 订餐时间 -->
      <scroll-view style="margin-top: 8vw;" scroll-x="true">
		  <view class="order-time">
				<view
				  v-for="(item, index) in configData.orderTimes"
				  class="order-time-item"
				  :class="{ 'active-time': activeTime == index }"
				  :key="index"
				  @click="activeTime = index"
				>
				  <view>
				    <!-- <view>{{ item.text }}</view> -->
				    <view>{{ item }}</view>
				  </view>
				</view>
		  </view>
        
      </scroll-view>
      <!-- 订餐包间 -->
      <!-- <view class="order-room">
        <view
          class="order-room-item"
          :class="{ 'active-room': chooseRoom }"
          @click="chooseRoom = !chooseRoom"
          >可订包间</view
        >
      </view> -->
      <!-- 确认按钮 -->
      <view class="confirm-btn" @click="handleConfirmBtn">选好了</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    editData: {
      type: Object,
      default: {},
    },
    configData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      peopleConfig: [
        "1人",
        "2人",
        "3人",
        "4人",
        "5人",
        "6人",
        "7人",
        "8人",
        "9人",
        "10人及以上",
      ],
      orderDay: [
        {
          day: "今天",
        },
        {
          day: "明天",
        },
        {
          day: "7.14",
          week: "周三",
        },
        {
          day: "7.15",
          week: "周四",
        },
        {
          day: "7.16",
          week: "周五",
        },
        {
          day: "7.17",
          week: "周六",
        },
        {
          day: "7.18",
          week: "周日",
        },
      ],
      orderTimes: [
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
        {
          text: "早餐",
          time: "7:00-10:30",
        },
      ],
      activePeople: -1,
      activeDay: -1,
      activeTime: -1,
      chooseRoom: false,
    };
  },
  created() {
    if (this.editData?.people) {
      this.activePeople = this.editData.activePeople;
      this.activeDay = this.editData.activeDay;
      this.activeTime = this.editData.activeTime;
      this.chooseRoom = this.editData.chooseRoom;
    }
  },
  methods: {
    handleConfirmBtn() {
		if (this.activePeople == -1) {
			this.$u.toast('请选择人数');
			return;
		}
		if (this.activeDay == -1) {
			this.$u.toast('请选择日期');
			return;
		}
		if (this.activeTime == -1) {
			this.$u.toast('请选择时间');
			return;
		}
      let choosed = {
        people: this.configData.peopleConfig[this.activePeople] || "0",
        day: this.configData.orderDay[this.activeDay] || "0",
        time: this.configData.orderTimes[this.activeTime] || "0",
        activePeople: this.activePeople,
        activeDay: this.activeDay,
        activeTime: this.activeTime,
      };
      this.$emit("handleConfirmBtn", { data: choosed });
    },
  },
};
</script>

<style lang="less" scoped>
.popup-page {
  width: 100%;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 211;
  .popup-bg {
    width: 100%;
    height: 100vh;
    background: #000000;
    opacity: 0.5;
  }
  .popup-body {
    width: 100%;
	height: 80vh;
    padding: 0 3.33vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 111;
    background: #ffffff;
    border-radius: 4vw 4vw 0 0;
    .close-icon {
      width: 4.73vw;
      height: 4.73vw;
      background-size: 100% 100%;
      position: absolute;
      top: 4vw;
      right: 3.87vw;
      z-index: 111;
    }
    .pepole-titile {
      width: 100%;
      padding-left: 8vw;
      font-size: 5.33vw;
      font-weight: 600;
      line-height: 4.27vw;
      color: #191919;
      margin: 16.8vw auto 9.6vw;
    }

    .people-num {
      display: flex;
      flex-wrap: nowrap;
      padding-right: 3.33vw;

      .people-num-item {
        font-size: 3.73vw;
        font-weight: 600;
        line-height: 4.27vw;
        color: #191919;
        height: 12vw;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0 5.065vw;
        flex-shrink: 0;
      }
      .active-peoppe {
        color: #ffffff;
        padding: 0 5.33vw;
        border-radius: 8vw;
        background: #1fb6fd;
      }
    }

    .order-day {
      display: flex;
      flex-wrap: nowrap;
      padding-right: 3.33vw;
      .order-day-item {
        font-size: 3.2vw;
        font-weight: 400;
        line-height: 4vw;
        color: #191919;
        height: 12vw;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0 5.2vw;
        flex-shrink: 0;
        .day-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
        }
      }
      .active-day {
        background: #1fb6fd;
        border-radius: 8vw;
        color: #ffffff;
        font-size: 3.73vw;
        font-weight: 600;
      }
    }

    .order-time {
      display: flex;
      flex-wrap: nowrap;
      padding-right: 3.33vw;
      .order-time-item {
        width: 24vw;
        height: 11.73vw;
        background: #ffffff;
        border: 0.27vw solid #1fb6fd;
        border-radius: 8vw;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-size: 3.2vw;
        font-weight: 600;
        color: #1fb6fd;
        margin-right: 2.4vw;
        text-align: center;
      }
      .order-time-item:last-child {
        margin-right: 0;
      }
      .active-time {
        background: #1fb6fd;
        color: #ffffff;
      }
    }

    .order-room {
      display: flex;
      flex-wrap: nowrap;
      padding-right: 3.33vw;
      margin-top: 8vw;
      .order-room-item {
        width: 22.67vw;
        height: 11.73vw;
        background: #ffffff;
        border: 0.27vw solid #1fb6fd;
        border-radius: 8vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.73vw;
        font-weight: 600;
        color: #1fb6fd;
      }
      .active-room {
        background: #1fb6fd;
        color: #ffffff;
      }
    }

    .confirm-btn {
      width: 91.47vw;
      height: 10.93vw;
      background: #1fb6fd;
      border-radius: 8vw;
      margin: 27.06vw auto 5.2vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 4.27vw;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
